<template>
  <view>
    <view class="header">
     <!-- <view class="back" @click="back()">
        <uni-icons type="left" size="20"></uni-icons>
      </view> -->
      <text>我的社区</text>
    </view>
    <my-search bgcolor="fff" inpbgcolor='#f7f7f7' title='帖子' @goSearch='goSearch'></my-search>
    <view class="interact-container">
      <block v-for="(item,index) in interactInfo" :key="index">
        <!-- <interact-box :item='item' pid=1 @getInfo='getInfo()' @changeCollect="changeCollect($event)"
          @changeDianzan="changeDianzan($event)"></interact-box> -->
        <interact-out :item='item' pid=1 @getInfo='getInfo()' @changeCollect="changeCollect($event)"
          @changeDianzan="changeDianzan($event)"></interact-out>
      </block>
    </view>

    <view class="goPost" @click="open()">
      <image src="/static/jia.png" mode=""></image>
    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="popupBox">
        <view class="popupHeader">
          发布
        </view>
        <view class="postType">
          <view class="text" @click="goPost('')">
            <view class="image">
              <image src="/static/wenben.png" mode=""></image>
            </view>
            <view class="title">
              动态
            </view>
          </view>
          <view class="picText" @click="chooseImage()">
            <view class="image">
              <image src="/static/tupian.png" mode=""></image>
            </view>
            <view class="title">
              图片
            </view>
          </view>
        </view>
        <view class="cancel" @click="close()">
          取消
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    onLoad() {
      this.getInfo()
    },
    onShow() {
      this.changeType()
    },
    data() {
      return {
        goodNum: 0,
        collectNum: 0,
        postNum: 0,
        chooseRange: 'collage',
        chooseType: 'time',
        page: 1,
        pagesize: 5,
        interactInfo: [],
      };
    },
    methods: {
      back(){
        uni.navigateBack();
      },
      async getInfo() {
        const data = await uni.$http.post(
          `/users/post/college/time/${this.userInfo.collegeType}/${this.userInfo.studentId}`, {
            page: this.page,
            pagesize: this.pagesize
          })
        this.interactInfo = data.data.data.records
      },
      async getGoodNum() {
        const data = await uni.$http.get(`/users/post/count/myThumbs/${this.userInfo.studentId}`)
        this.goodNum = data.data.data
      },
      async getPostNum() {
        const data = await uni.$http.get(`/users/post/count/myPosts/${this.userInfo.studentId}`)
        this.postNum = data.data.data
      },
      async getCollectNum() {
        const data = await uni.$http.get(`/users/post/count/mycollection/${this.userInfo.studentId}`)
        this.collectNum = data.data.data
      },
      goCollect() {
        uni.navigateTo({
          url: '/subpkg/collect/collect'
        })
      },
      goMyGood() {
        uni.navigateTo({
          url: '/subpkg/myGoodList/myGoodList'
        })
      },
      goMyPostList() {
        uni.navigateTo({
          url: '/subpkg/myPostList/myPostList'
        })
      },
      goSearch() {
        uni.navigateTo({
          url: '/subpkg/searchInteract/searchInteract'
        })
      },
      async chooseCollage() {
        if (this.chooseRange == 'school') {
          this.chooseRange = 'collage'
          this.pagesize = 5
          this.changeType()
        }
      },
      async chooseSchool() {
        if (this.chooseRange == 'collage') {
          this.chooseRange = 'school'
          this.pagesize = 5
          this.changeType()
        }
      },
      async chooseTime() {
        if (this.chooseType == 'hot') {
          this.chooseType = 'time';
          this.pagesize = 5
          this.changeType()
        }
      },
      async chooseHot() {
        if (this.chooseType == 'time') {
          this.chooseType = 'hot';
          this.pagesize = 5
          this.changeType()
        }
      },
      async changeType() {
        console.log(666);
        if (this.chooseRange == 'school' && this.chooseType == 'time') {
          const data = await uni.$http.post(`/users/post/timesort/page/posts/${this.userInfo.studentId}`, {
            page: this.page,
            pagesize: this.pagesize
          })
          this.interactInfo = data.data.data.records
        } else if (this.chooseRange == 'collage' && this.chooseType == 'time') {
          const data = await uni.$http.post(
            `/users/post/college/time/${this.userInfo.collegeType}/${this.userInfo.studentId}`, {
              page: this.page,
              pagesize: this.pagesize
            })
          this.interactInfo = data.data.data.records
        } else if (this.chooseRange == 'school' && this.chooseType == 'hot') {
          const data = await uni.$http.post(`/users/post/thumbSort/page/posts/${this.userInfo.studentId}`, {
            page: this.page,
            pagesize: this.pagesize
          })
          this.interactInfo = data.data.data.records
        } else if (this.chooseRange == 'collage' && this.chooseType == 'hot') {
          const data = await uni.$http.post(
            `/users/post/college/hot/${this.userInfo.collegeType}/${this.userInfo.studentId}`, {
              page: this.page,
              pagesize: this.pagesize
            })
          this.interactInfo = data.data.data.records
        }
      },
      changeCollect(e) {
        const that = this
        this.interactInfo.forEach((item, index) => {
          if (item.postId == e.id) {
            that.interactInfo[index].collectionCount += e.count
            that.interactInfo[index].is_PostCollection += e.count
          }
        })
      },
      changeDianzan(e) {
        const that = this
        this.interactInfo.forEach((item, index) => {
          if (item.postId == e.id) {
            that.interactInfo[index].thumbsCount += e.count
            that.interactInfo[index].is_PostThumbs += e.count
          }
        })
      },
      open() {
        this.$refs.popup.open('bottom')
      },
      close() {
        this.$refs.popup.close()
      },
      chooseImage() {
        let that = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            that.goPost(res.tempFilePaths)
          }
        });
      },
      goPost(url) {
        uni.navigateTo({
          url: '/subpkg/myPost/myPost?url=' + url,
        })
        this.close()
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    },
    onReachBottom() {
      this.pagesize += 5
      this.changeType()
    }
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;
    
    .back{
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .interact-nav {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;

    .interact-range {
      display: flex;
      align-items: center;

      .collage,
      .school {
        width: 120rpx;
        height: 50rpx;
        margin-left: 20rpx;
        text-align: center;
        line-height: 50rpx;
        font-size: 30rpx;
        border-radius: 30rpx;
        color: #333;
        background-color: #ddd;
      }

      .range-active {
        color: #f1f1f1;
        background: linear-gradient(to right, #99c3fd, #80b5fb);
      }
    }

    .interact-type {
      display: flex;
      align-items: center;

      .time,
      .hot,
      .divide {
        font-size: 34rpx;
        margin-right: 10rpx;
        color: #777;
      }

      .type-active {
        color: #000;
      }
    }
  }

  .interact-container {
    margin-top: 20rpx;
  }

  .goPost {
    position: fixed;
    bottom: 100rpx;
    right: 80rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: linear-gradient(to bottom, #79d9f9, #378aed);

    image {
      position: absolute;
      top: 24rpx;
      left: 20rpx;
      width: 60%;
      height: 60%;
    }
  }

  .popupBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 380rpx;
    padding-top: 30rpx;
    border-radius: 50rpx 50rpx 0 0;
    background-color: #fff;

    .popupHeader {
      height: 80rpx;
      text-align: center;
    }

    .postType {
      display: flex;
      height: 200rpx;

      .picText,
      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 45%;
        height: 180rpx;
        margin-left: 24rpx;

        .image {
          width: 80rpx;
          height: 80rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .title {
          margin-top: 10rpx;
          font-size: 40rpx;
        }
      }
    }

    .cancel {
      width: 90%;
      height: 80rpx;
      margin: 20rpx auto;
      border: 1rpx solid #ddd;
      border-radius: 40rpx;
      font-size: 36rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: #f8f8f8;
    }
  }
</style>